@import 'magnific-popup.css';
@import '../bootstrap/css/bootstrap.css';
@import 'icon-font-booom.less';
@import 'flat-ui.less';



/* TABLE OF CONTENTS =====

1. TYPOGRAPHY & BASELINE GRID
2. GENERAL STYLES
3. HEADER NAVIGATION
4. HERO 
5. FEATURES
6. NEWSLETTER 
7. GALLERY
8. INFO 
9. PRICING
10. TESTIMONIALS 
11. FAQ & CONTACT 
12. BLOG 
13. FOOTER 
14. MEDIA QUERIES 



/* ========== 1. TYPOGRAPHY & BASELINE GRID ========== */

html {
	webkit-font-smoothing: antialiased;
}

body {
	padding-top: 72px;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 60px;
	line-height: 72px;
	margin-bottom: 24px;
}

h3 {
	margin-bottom: 24px;
}

h4 {
	font-size: 30px;
	line-height: 36px;
	margin-bottom: 12px;
}

p {
	font-weight: 300;
	margin: 0 0 12px 0;
	padding: 0 0 24px 0;
}

p.lead {
	font-size: 28px;
	line-height: 36px;
	margin-bottom: 0px;
	color: @concrete;
}

header {
	margin-bottom: 12px;
	text-align: center;
}

section {
	padding: 72px 0;
}

input {
	margin-bottom: 19px;
}

hr {
	margin:24px 0 47px;
}



/* ========== 2. GENERAL STYLES ========== */

#main-content {
	background-color: white;
	padding: 72px 0;
}

.carousel-control {
	height: 0;
	border: none;
	transition: all 0.2;

	&:hover {
		.opacity(1);
	}

	&.left {
		left: 0;
	}
	
	&.right {
		right: 20px;
	}
	span {
		color: white;
	}
}

.carousel-indicators {
	margin-bottom: -36px;
	top: auto;
	bottom: 0;
	left: 30%;
	right: 30%;

	li {
		height: 12px;
		width: 12px;

		&.active {
			height: 12px;
			width: 12px;
		}

	}
}

.tooltip-trigger, 
.popover-trigger {
	color: @turquoise;
	border-bottom: dotted 1px;
}

.popover-trigger {
	cursor: pointer;
}

.popover-content {
	padding-bottom: 9px;
}

#error-info, #contact-error {
	margin-top: 24px;
}

.panel-heading {
	padding: 0;

	h3 {
		font-size: 22px;
		padding: 0 24px;
		line-height: 48px;
	}
}

.panel-title {
	padding: 6px 12px;

	a {
		display: block;
	}
}

.panel-body {
	padding: 24px;
}

.panel {
	margin-bottom: 48px;
}

input, textarea {
	border: none !important;
	background-color: @clouds !important;
}

form .btn {
	margin-top: 19px;
}

.project, .related-projects {
	padding-bottom: 24px;

	img {
		padding-bottom: 24px;
	}
}

.hover {
  -webkit-transition: all 0.2s ease;
     -moz-transition: all 0.2s ease;
       -o-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
          transition: all 0.2s ease;
	
	&:hover {
		opacity: 0.9;
	  -webkit-transform: scale(0.95);
	     -moz-transform: scale(0.95);
	       -o-transform: scale(0.95);
	      -ms-transform: scale(0.95);
	          transform: scale(0.95);
	
	}
}

.btn,
.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn-group > .popover {
  font-weight: 300;
}

.inline {
	margin-left: 12px;
}

.icon-huge {
	display: block;
	margin: 0 auto;
	text-align: center;

	img {
		height: 240px;
		width: 240px;
		margin-bottom: 48px;
	}
}

#twitter {
	background-color: @clouds;

	img {
		height: 144px;
		width: 144px;
		padding-bottom: 24px;
	}

	ul.tweet_list {
		list-style: none;
		padding-left: 0;
	}
}



/* ========== 3. HEADER NAVIGATION SECTION ========== */

#header {
	padding: 0;

	.navbar-collapse {
		max-height: 500px;
	}

	.navbar {
		margin-bottom: 0;
		border-radius: 0px;
		border-bottom: solid 1px @clouds;

		.navbar-inner {
			background-color: white;
			border-radius: 0px;

			li {

				&.active {
					color: @turquoise;
				}
			}
		}

		a.navbar-brand {
			padding: 18px 0;
		}

		h1 {
			margin-bottom: 0;
	
			a.navbar-brand {
				padding: 21px 0 0 0;
				margin: 0;
			}
		}

		.logo-img {
			height: 36px;
		}
	}
}



/* ========== 4. HERO SECTION ========== */

#hero {
	padding: 0;
	background: transparent;
	height: 600px;

	.intro {
		padding-top: 144px;
		padding-bottom: 24px;

		img {
			padding-bottom: 24px;
		}
	}
	
	.lead {
		color: @midnight-blue;
		font-size: 2.5em;
		line-height: 1.3em;
	}
}

#parallax {
	height: 672px;
	width: 100%;
	position: fixed;
	background: url('http://www.placehold.it/1400x600') center center no-repeat;
	background-size: cover;
	z-index: -100;
}



/* ========== 5. FEATURES SECTION ========== */

#features {
	background-color: white;

	padding-bottom: 48px;

	.feature-icon {
		margin: 24px auto;

		img {
			height: 168px;
			width: 168px;

		  -webkit-transition: all 0.2s ease;
		     -moz-transition: all 0.2s ease;
		       -o-transition: all 0.2s ease;
		      -ms-transition: all 0.2s ease;
		          transition: all 0.2s ease;
			
			&:hover {
			  -webkit-transform: rotate(-45deg);
			     -moz-transform: rotate(-45deg);
			       -o-transform: rotate(-45deg);
			      -ms-transform: rotate(-45deg);
			          transform: rotate(-45deg);
			}
		}
	}
}



/* ========== 6. NEWSLETTER SECTION ========== */

#newsletter {
	background-color: @turquoise;
	padding-bottom: 48px;

	p.lead {
		color: white;
		padding-top: 6px;
	}

	input {
		border: none;
	}

	.btn-hg {
		height: 53px;
	}

	.btn-inverse {
		border: none;
		background-color: @midnight-blue;
	}

	form .btn {
		margin-top: 0;
	}
}



/* ========== 7. GALLERY SECTION ========== */

#gallery {
	background-color: @clouds;

	.gallery-filter {
		min-height: 96px;
		margin: 0 auto;
		display: block;
		text-align: center;
	}

	#gallery-items {
		margin: 24px 0;
		

		.gallery-item {
			padding-bottom: 24px;

			figure {
				position: relative;

				-webkit-transition: all 0.2s ease;
			     -moz-transition: all 0.2s ease;
			       -o-transition: all 0.2s ease;
			      -ms-transition: all 0.2s ease;
			          transition: all 0.2s ease;
				
				&:hover {
					opacity: 0.9;
				  -webkit-transform: scale(0.95);
				     -moz-transform: scale(0.95);
				       -o-transform: scale(0.95);
				      -ms-transform: scale(0.95);
				          transform: scale(0.95);

		        	.item-hover {
						opacity: 1;
						top: 50%;
					}
				}

				.item-hover {
					position: absolute;
					padding: 12px 0;
					margin: -24px auto 0;
					text-align: center;
					height: auto;
					width: 100%;
					top: 60%;
					background: rgba(255,255,255,0.5);
					left: 0;  
					opacity: 0;
					z-index: 999;
					overflow: hidden;
					font-size: 18px;
					line-height: 27px;

					transition: all 0.3s;

					a {
						padding: 0 18px;
					}
				}
			}
		}
	}
}

/* ISOTOPE FILTERING */

.isotope-item { 
  z-index: 2; 
} 
  
.isotope-hidden.isotope-item { 
  pointer-events: none; 
  z-index: 1; 
} 
  
.isotope, 
.isotope .isotope-item { 
-webkit-transition-duration: 0.8s; 
   -moz-transition-duration: 0.8s; 
        transition-duration: 0.8s; 
} 
  
.isotope { 
-webkit-transition-property: height, width; 
   -moz-transition-property: height, width; 
        transition-property: height, width; 
} 
  
.isotope .isotope-item { 
-webkit-transition-property: -webkit-transform, opacity; 
   -moz-transition-property:    -moz-transform, opacity; 
        transition-property:         transform, opacity; 
} 



/* ========== 8. INFO SECTION ========== */

#info {
	padding: 0;

	.info-section-white, 
	.info-section-gray {
		padding: 72px 0;
		-webkit-backface-visibility: hidden;
	}

	.info-section-gray {
		background-color: @clouds;
	}

	.info-section-white {
		background-color: white;
	}
}
  
/* Initial state (hidden or anything else) */
.cbp-so-init .cbp-so-side {
    opacity: 0;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}
 
.cbp-so-init .cbp-so-side-left {
    -webkit-transform: translateX(-80px);
    -moz-transform: translateX(-80px);
    transform: translateX(-80px);
}
 
.cbp-so-init .cbp-so-side-right {
    -webkit-transform: translateX(80px);
    -moz-transform: translateX(80px);
    transform: translateX(80px);
}
 
/* Animated state */
/* add you final states (transition) or your effects (animations) for each side */
.cbp-so-section.cbp-so-animate .cbp-so-side-left,
.cbp-so-section.cbp-so-animate .cbp-so-side-right {
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    -moz-transition: -moz-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
}
 
/* For example, add a delay for the right side:
.cbp-so-section.cbp-so-animate .cbp-so-side-right {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
*/
 
/* Example media queries */
 
@media screen and (max-width: 73.5em) {
    .cbp-so-scroller {
        font-size: 65%;
    }
 
    .cbp-so-section h2 {
        margin: 0;
    }
 
    .cbp-so-side img {
        max-width: 120%;
    }
}
 
@media screen and (max-width: 41.125em) {
    .cbp-so-side {
        float: none;
        width: 100%;
    }
 
    .cbp-so-side img {
        max-width: 100%;
    }
}



/* ========== 9. PRICING SECTION ========== */
#pricing {
	background-color: @clouds;
	text-align: center;

	ul {
		list-style: none;
	}

	.pricing-box {
		margin: 48px 0;
	
		.pricing-heading {
			background-color: @turquoise;
			color: @clouds;
			font-size: 24px;
			line-height: 48px;
			padding: 12px;
		}

		.pricing-price {
			background-color: @green-sea;
			font-weight: 400;
			color: @clouds;
			font-size: 60px;
			line-height: 72px;
			padding: 12px;	
		}

		.pricing-description {
			background-color: @turquoise;
			font-size: 21px;
			line-height: 48px;
			color: @clouds;
			padding: 12px;
		}

		ul.pricing-list {
			margin: 0;
			padding: 0;

			li {
				font-size: 18px;
				line-height: 48px;
				color: @asbestos;

				padding: 12px 0;
				list-style: none;
				

				&:nth-child(odd) {
					background-color: white;
				}

				&:nth-child(even) {
				background-color: lighten(@clouds, 3%);
				}
			}
		}

		.pricing-cta {
			background: @turquoise;
			
			text-transform: uppercase;
			padding: 24px;

			.btn-pricing {
				font-size: 1.1em;
				background-color: @green-sea;
				color: white;

				&:hover {
					background-color: darken(@green-sea, 3%);
					color: white;
				}
			}
		}
	}

	.pricing-box.popular {
		margin-top: 24px;

		.pricing-heading {
			background-color: @alizarin;
			color: #ffffff;
			font-size: 28px;
			padding: 24px;
		}

		.pricing-price {
			background-color: @pomegranate;
			font-weight: 400;
			color: #ffffff;
		}

		.pricing-description {
			background-color: @alizarin;
			color: #ffffff;
		}

		.pricing-cta {
			background: @alizarin;
			
			text-transform: uppercase;
			padding: 24px;

			.btn-pricing-popular {
				font-size: 1.1em;
				background-color: @pomegranate;
				color: white;

				&:hover {
					background-color: darken(@pomegranate, 3%);
					color: white;
				}
			}
		}

	}
}



/* ========== 10. TESTIMONIALS SECTION ========== */

#testimonials {
	background-color: @turquoise;

	.quote-icon img {
		height: 168px;
		width: 168px;
		margin-left: -12px;
	}

	p.lead {
		color: white;
		padding-top: 24px;
	}

	cite {
		color: @clouds;
		font-size: 18px;
		font-weight: 300;

		a {
			color: @clouds;
			border-bottom: dotted 1px @clouds;
		}
	}
}



/* ========== 11. FAQ & CONTACT SECTION ========== */

#faq {

	.panel-group .panel + .panel {
		margin-top: 14px;
	}
	
	#accordion {
		margin-bottom: 15px;

		.btn {
			/*border-radius: 0;*/
			text-align: left;	
		}

		.answer {
			padding: 18px 24px 0;
			border-radius: 5px;
			background-color: @clouds;
		}
	}

	.contact-intro {
		margin-bottom: 24px;

		img {
			height: 120px;
			width: 120px;
		}

		.lead {
			padding-top: 24px;
			color: @midnight-blue;
		}
	}

	input, textarea {
		border: none;
		background-color: @clouds;
	}

	form .btn {
		margin-top: 19px;
	}
}



/* ========== 12. BLOG SECTION ========== */

#blog {
	background-color: white;

	padding-bottom: 48px;

	.blog-layout {
		padding: 72px 0;
	}

	.blog-item {
		padding-bottom: 96px;

		a.blog-title {
			color: @midnight-blue;
			font-size:28px;
			text-transform: uppercase;
			line-height: 48px;

			&:hover {
				color: @asbestos;
			}
		}

		.blog-teaser {
			margin-bottom: 0;
		}

		a.blog-link {
			margin-top: 0;
		}

		&.single .lead {
			padding-top: 12px;
		}
	}

	.blog-meta {
		padding: 12px 0;
	}

	span.label {
		padding: 6px 12px;
		margin: 0 6px 6px 0;
		display: inline-block;

		&:hover {
			background-color: darken(@clouds, 4%);
		}
	}

	.featured-image {
		padding-bottom: 24px;
	}

	ul.social-icons {
		padding: 0;
		margin-top: -24px;
		li {
			float: left;
			font-size: 24px;
			padding-right: 24px;
			list-style: none;
		}
	}

	.pagination {
		margin: 0 auto;
		display: block;
		text-align: center;
		padding-bottom: 48px;
	}

	.sidebar {
		padding-left: 48px;
		margin-left: 48px;
		padding-right: 0;
		border-left: solid 1px @clouds;

		.widget {
			padding-bottom: 48px;

			.widget-title {
				font-size: 22px;
				text-transform: uppercase;
				line-height: 36px;
				padding-bottom: 12px;
			}

			.widget-description {
				font-size: 18px;
				font-weight: 300;
			}

			ul {
				padding-left: 0px;
				
				li {
					list-style: none;
					font-size: 18px;
					font-weight: 300;
				}
			}
		}
	}

	ul.comments {		

		li {
			list-style: none;
			padding: 24px 0;

			.comment-text p, .action {
				margin-top: -24px;
			}

			&.indent-1 {
				margin-left: 96px;
			}

			&.indent-2 {
				margin-left: 192px;
			}
		}
	}
}



/* ========== 13. FOOTER ========== */

#footer {
	padding: 0;
	margin: 0;

	.bottom-menu, 
	.bottom-menu-inverse {
		padding: 24px 0 0;

		p {
			margin-bottom: 0;
		}

		ul.bottom-icons {
			float: right;
		
			li {
				text-align: right;

				a {
					font-size: 18px;
					padding-top: 6px;
					color: white;

					&:hover {
						color: @turquoise;
					}
				}
			}
		}
	}

}



/* ========== 14. MEDIA QUERIES ========== */

@media (max-width: 991px) {

	body {
		padding-top: 0;
	}

	#header {

		.navbar {
	
			.navbar-inner {

				ul {
				
					li {

						a {
							padding-left: 0;
						}

					}
				}
			}
		}
	}

	#newsletter {

		p.lead {
			text-align: center;
		}
	}

	#info {
		text-align: center;

		.pull-right, 
		.pull-left {
			float: none !important;
		}

		img.img-responsive {
			width: 100%;
			padding-bottom: 36px;
			text-align: center;
			margin: 0 auto;
			display: block;
		}

		.carousel-indicators {
			margin-bottom: 24px;
		}

		.carousel-inner {
			padding-bottom: 48px;
		}

		.btn {
			margin-bottom: 24px;
		}

		.fitvids {
			margin-bottom: 27px;
		}
	}

	#testimonials {
		text-align: center;

		.quote-icon {
			text-align: center;
			margin: 0 auto;
			display: block;
		}

		img {
			margin-left: auto;
		}
	}

	#faq {
		text-align: center;

		img {
			margin: 24px auto 0;
			height: 196px !important;
			width: 196px !important;
			display: block;
			text-align: center;
		}

		.alert {
			text-align: left;
		}
	}

	#footer {
		text-align: center;

		.social {
			text-align: center;
			margin: 0 auto;
			display: table;
			padding-bottom: 48px;
		}
	}

	#blog {

		.sidebar {
			margin: 0;
			padding: 0;
			border: none;
			text-align: center;
		}
	}

}


/* ========== Small devices (tablets, 768px and up) ========== */
@media (max-width: 767px) {

	#header {

		.navbar {
			position: relative;
	
			.navbar-inner {

				ul {
					width: 75%;
					margin: 0 auto;
					display: block;
					text-align: center;
		

					li {
						background-color: @clouds;
						text-align: center;
						padding: 12px;
						margin-bottom: 24px;
					}
				}
			}
		}
	}

	#hero {
		text-align: center;
		height: auto;
		background-color: @clouds;
		padding: 48px 0;

		.intro {
			padding: 0;
		}
	}

	#blog {

		ul.comments li {

			&.indent-1 {
				margin-left: 48px;
			}

			&.indent-2 {
				margin-left: 96px;
			}
		}

		.blog-layout {
			text-align: center;

			img {
				margin: 0 auto;
				display: block;
				text-align: center;
			}
		}

		.blog-item {

			.blog-main, .comment-form {
				text-align: center;
			}
		}
	}

	.project {
		text-align: center;
	}
}